<template>
  <div>
    <h2>App组件</h2>
    <!-- 如果给子组件传递数据，则通过自定义属性的方式传递 -->
    <!-- 如果值是下面的数据项，是一个可变量，则需要添加冒号 -->
    <GoodsList
      v-for="item in list"
      :key="item.id"
      :id="item.id"
      :pname="item.pname"
      :price="item.price"
      :info="item.info"
      @kanyidao="kanjia"
    ></GoodsList>
  </div>
</template>

<script>
import GoodsList from "./components/GoodsList.vue";
export default {
  data() {
    return {
      username: "lisi",
      age: 25,
      list: [
        { id: 201, pname: "超级无敌棒棒糖", price: 13, info: "好吃，再来一根" },
        { id: 201, pname: "超级解渴水果茶", price: 80, info: "好甜，再来一杯" },
        { id: 201, pname: "超级好吃大鸡腿", price: 60, info: "可口，再来一份" },
      ],
    };
  },
  // 注册组件
  components: {
    GoodsList,
  },
  methods: {
    kanjia(id) {
      // console.log(id); // 得到商品ID
      const row = this.list.find((item) => {
        // return 条件
        return item.id === id;
      });
      row.price--;
    },
  },
};
</script>

<style>
</style>